﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>品评网触屏版</title>
        <meta name="keywords" content="品评网,触屏版,手机版,2017年度中国十大品牌评选官方网站,十大品牌门户,十大品牌排行,中国十大品牌,十大品牌投票"/>
        <meta name="description" content="品评网是一家专注于为企业推广宣传,为企业提供全方位的解决方案，使企业在激烈的市场竞争中始终保持竞争力，实现企业快速、稳定地发展。"/>
        <link href="http://www.10pinping.com/skin/10/wap.css" rel="stylesheet" type="text/css" />
        <link href="http://www.10pinping.com/skin/10/wap/footer.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://www.10pinping.com/file/script/public.js"></script>
        <script type="text/javascript" src="http://www.10pinping.com/file/script/jquery.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    </head>
    <body style="background: #EEEEEE;"><a name="top"></a><div class="layout_640">
            <style>
                *{padding: 0;list-style-type: none;text-decoration: none; }
                @media only screen and (min-width:640px){
                    *{max-width: 640px;margin: 0 auto;}
                    html{font-size:100px !important;}
                    .step{top:2.4rem !important;}
                }
                @media only screen and (max-width:320px){
                    .step li span{margin: 0 0.2rem !important;}
                }
                @media only screen and (min-width:320px) and (max-width:375px){
                    .step li span{margin: 0 0.25rem !important;}
                    .step{top:2.8rem !important;}
                }
                @media only screen and (min-width:375px) and (max-width:412px){
                    .step{top:2.7rem !important;}
                }
                @media only screen and (min-width:412px) and (max-width:480px){
                    .step{top:2.6rem !important;}
                }
                @media only screen and (min-width:480px) and (max-width:540px){
                    .step{top:2.5rem !important;}
                }
                @media only screen and (min-width:540px) and (max-width:640px){
                    .step{top:2.5rem !important;}
                }
                html{font-size:calc(100/640*100vw)}
                body,ul,p,h2{margin:0;}
                body>div{position:static !important;}
                /*{header}*/
                .main{background-color:#b2d8ff;}
                .banner1{width:100%;}
                .banner1 img{width:5.42rem;margin: 0.06rem 0rem 0.06rem 0.52rem;}
                .banner1 .img2{display: none;}
                .step{width:100%;position: absolute;top:3rem;}
                .step ul{margin:0 auto;background-image: url("./img/step-line.png");background-repeat: no-repeat;background-size:5.82rem 0.26rem;background-position:0.29rem 0.93rem;overflow: hidden;text-align: center;}
                .step li{display: inline-block;background-image: url("./img/step-unselected.png");background-repeat: no-repeat;background-size:0.12rem 0.12rem;background-position:center 0.58rem;}
                .step .select{background-image: url("./img/step-selected.png");background-size:0.16rem 0.16rem;background-position: center 0.56rem;}
                .step li span{font-size: 0.2rem;color:#ffffff;height:0.78rem;display: block;line-height: 0.78rem;margin:0 0.32rem;}
                .step .active{color:#2a69a9;}
                .register{width: 100%;overflow: hidden;margin-top: -0.14rem;}
                .register form{width:5.74rem;margin: 0.14rem 0 0.5rem 0.29rem;-webkit-box-shadow: 0.14rem -0.14rem 0 #4baee4;-moz-box-shadow: 0.14rem -0.14rem 0 #4baee4;-ms-box-shadow: 0.14rem -0.14rem 0 #4baee4;-o-box-shadow: 0.14rem -0.14rem 0 #4baee4;box-shadow: 0.14rem -0.14rem 0 #4baee4;border-radius: 0.18rem;background-color: #fff;overflow: hidden;}


                .register .first_step li{float: left;width:100%;min-height: 0.44rem;}
                .register .first_step p{font-size:0.24rem;color:#f85151;margin:0.14rem 0 0 0.29rem;line-height: 0.68rem;}
                .register .first_step input{margin:0.2rem 0 0.2rem 0.62rem;height:0.7rem;width:78%;border-radius: 0.35rem;text-indent: 0.35rem;border:1px solid #bfbfbf;font-size: 0.28rem;outline: none;}
                .register .first_step .yanzhengma{width:45%;margin-right: 0.2rem;}
                .register .first_step .fasong{width:29%;margin-left: 0;text-align: center;text-indent: 0;background-color:#f3a64c;color:#ffffff;border:none; }
                .register .first_step .tips{line-height: 0.44rem;margin-left:0.62rem;text-indent: 0.33rem;display: none;}
                .register .first_step .xiayibu{text-align: center;text-indent: 0;background-color:#f3a64c;color:#ffffff;border:none; margin-bottom: 0.29rem;}
                .register .first_step .clear{clear:both;}

                .register .second_step{display: none;}
                .register .second_step li{float: left;width:100%;position: relative;min-height: 0.44rem;}
                .register .second_step span{font-size: 0.28rem;color:#999999;text-indent: 0.29rem;display: inline-block;height:0.7rem;line-height: 0.7rem;float: left;margin: 0.2rem 0;}
                .register .second_step .must{background-image: url("./img/must.png");background-repeat: no-repeat;background-size:0.15rem 0.15rem;background-position:1.59rem center;width: 33%;}
                .register .second_step p{font-size:0.2rem;color:#f85151;margin:0.22rem 0.32rem 0 0.32rem;line-height: 0.48rem;padding:0.04rem 0 0.04rem 0.15rem;background-color: #f4f4f4;}
                .register .second_step input{margin:0.2rem 0.33rem 0.2rem 0;height:0.7rem;width:32%;border-radius: 0.35rem;text-indent: 0.35rem;border:1px solid #bfbfbf;font-size: 0.28rem;float: right;outline: none;}
                .register .second_step .company_name{margin-left: 0;width:60%;}
                .register .second_step .tips{line-height: 0.44rem;margin-top:0.2rem;margin-left:0.62rem;text-indent: 0.33rem;display: none;background-color: #fff;}
                .register .second_step .step_sec_btn{width:82%;margin:0.29rem 9%;text-align: center;text-indent: 0;background-color:#f3a64c;color:#ffffff;border:none; }
                .register .second_step .yyzz,.register .second_step .zzjg,.register .second_step .swdj{opacity: 0;}
                .register .second_step .yyzzs,.register .second_step .zzjgs,.register .second_step .swdjs{position: absolute;height:0.7rem;width:32%;top:0;right:0.33rem;background-color: #c2c2c2;border-radius: 0.35rem;color: #ffffff;background-image:url("./img/photo.png");background-repeat: no-repeat;background-size: 0.33rem 0.35rem;background-position:0.27rem center;font-size: 0.28rem;text-indent: 0.73rem;}
                .register .second_step .actives{background-color: #4baee4;}
                .register .second_step .clear{clear:both;}

                .register .third_step{display: none;}
                .register .third_step li{float: left;width:100%;position: relative;min-height: 0.44rem;}
                .register .third_step span{font-size: 0.28rem;color:#999999;text-indent: 0.29rem;display: inline-block;height:0.7rem;line-height: 0.7rem;float: left;margin: 0.2rem 0;}
                .register .third_step .must{background-image: url("./img/must.png");background-repeat: no-repeat;background-size:0.15rem 0.15rem;background-position:1.8rem center;width: 35%;}
                .register .third_step p{font-size:0.2rem;color:#f85151;margin:0.22rem 0.32rem 0 0.32rem;line-height: 0.48rem;padding:0.04rem 0 0.04rem 0.15rem;background-color: #f4f4f4;}
                .register .third_step input{margin:0.2rem 0.33rem 0.2rem 0;height:0.7rem;width:32%;border-radius: 0.35rem;text-indent: 0.35rem;border:1px solid #bfbfbf;font-size: 0.28rem;float: right;outline: none;}
                .register .third_step .tipics{line-height: 0.44rem;margin:0 0.29rem;padding: 0;background-color: #fff;}
                .register .third_step .company_web,.register .third_step .logo_name{width:55%;}
                .register .third_step .fenlei{margin:0.2rem 0.33rem 0.2rem 0;height:0.7rem;width:55%;border-radius: 0.35rem;text-indent: 0.35rem;border:1px solid #bfbfbf;font-size: 0.28rem;float: right; appearance:none;-webkit-appearance: none;-moz-appearance:none;color:#999999;background-image: url("./img/pull-down.png");background-repeat: no-repeat;background-size:0.16rem 0.09rem; background-position:2.7rem center;outline: none;}
                .clear{clear: both;}
                .register .third_step .xzfl{font-size: 0.28rem;}
                .register .third_step .tips{line-height: 0.44rem;margin-top:0.2rem;margin-left: 0.62rem;text-indent: 0.33rem;display: none;background:#ffffff;}
                .register .third_step .third_step_btn{width:82%;margin:0.29rem 9%;text-align: center;text-indent: 0;background-color:#f3a64c;color:#ffffff;border:none; }
                .register .third_step .logosb,.register .third_step .sbzcz{opacity: 0;}
                .register .third_step .logosbs,.register .third_step .sbzczs{position: absolute;height:0.7rem;width:32%;top:0;right:0.33rem;background-color: #c2c2c2;border-radius: 0.35rem;color: #ffffff;background-image:url("./img/photo.png");background-repeat: no-repeat;background-size: 0.33rem 0.35rem;background-position:0.27rem center;font-size: 0.28rem;text-indent: 0.73rem;}
                .register .third_step .actives{background-color: #4baee4;}
                .register .third_step .clear{clear:both;}

                .remark{width:100%;height: 100%;opacity:0.8;background-color:#000000;position: fixed;top:0;z-index:100;display: none;}
                .remark p{position: absolute;top:3rem;width:50%;height:1.5rem;left:25%;color: #fff;background: #000;font-size: 0.36rem;line-height: 1.5rem;text-align:center;}
            </style>
            <div class="header_new">
                <span class="header_btn_back" onclick="location = 'http://m.10pinping.com/'"></span>
                <h1>品评网快速报名</h1>
                <!--<span class="icon_menu" style="border: none;" onclick="$('.menu_list').slideToggle();"></span>-->
                <!--                <div class="menu_list">
                                    <a onclick="showDialog(0);" href="javascript:void(0)">登录注册</a>
                                    <a href="http://m.10pinping.com/">返回首页</a>
                                    <a href="http://m.10pinping.com/vote/">十大投票</a>
                                    <a href="http://m.10pinping.com/brand/bangdan.php">近期榜单</a>
                                    <a href="http://m.10pinping.com/about/app.php">客户端</a>
                                     <a href="http://m.10pinping.com/brand/baoming.php">在线报名</a> 
                                    <a href="http://m.10pinping.com/help/help_center.php">帮助中心</a>
                                    <a href="http://m.10pinping.com/guestbook/">问题反馈</a>
                                    <a href="http://m.10pinping.com/about/contact.php">联系我们</a>
                                </div>-->
            </div>

            <div class="main">
                <div class="banner1">
                    <img class="img1" src="img/step-one.png" alt=""/>
                    <img class="img2" src="img/step-two.png" alt=""/>
                </div>
                <div class="step">
                    <ul>
                        <li class="select step_one"><span class="active">第一步注册</span></li>
                        <li class="step_two"><span>第二步信息补充</span></li>
                        <li class="step_three"><span>第三步完成</span></li>
                    </ul>
                </div>
                <div class="register">
                    <form action="" method="">
                        <div class="first_step">
                            <ul>
                                <li><p>提示：本页只限于未注册过品评网的新用户</p></li>
                                <li><input class="phone" type="text"  placeholder="手机号"/><div class="clear"></div></li>
                                <li><input class="yanzhengma" type="text" placeholder="验证码"/><input class="fasong" type="button" value="发送"><div class="clear"></div></li>
                                <li><input class="mm" type="password" placeholder="密码"><div class="clear"></div></li>
                                <li><input  class="re_mm" type="password" placeholder="再次输入密码"/><div class="clear"></div></li>
                                <li><p class="tips">验证码不正确，请重新输入</p></li>
                                <li><input class="xiayibu" type="button" value="下一步" /><div class="clear"></div></li>
                                <div class="clear"></div>
                            </ul>
                        </div>
                        <div class="second_step">
                            <ul>
                                <li><span class="must">公司名称</span><input class="company_name" type="text"/><div class="clear"></div></li>
                                <li><span class="must">营业执照</span><input class="yyzz" type="file"/><span class="yyzzs">未上传</span><div class="clear"></div></li>
                                <li><span>组织机构代码证</span><input class="zzjg" type="file"/><span class="zzjgs">未上传</span><div class="clear"></div></li>
                                <li><span>税务登记证</span><input class="swdj" type="file"/><span class="swdjs"> 未上传</span><div class="clear"></div></li>
                                <li><p>认证说明：请上传公司有效证件（营业执照等）<br/>三证合一的企业只需要上传营业执照，请确保证件的真实有效性。若认证不通过请登录官方网站或app客户端修改认证信息。</p></li>
                                <li><p class="tips">验证码不正确，请重新输入</p></li>
                                <li><input class="step_sec_btn" type="button" value="保证证件真实，进行下一步认证"/><div class="clear"></div></li>
                                <div class="clear"></div>
                            </ul>
                        </div>
                        <div class="third_step">
                            <ul>
                                <li><span class="must">分类</span><select class="fenlei"><option class="xzfl">选择分类</option><option>男</option><option>女</option></select><div class="clear"></div></li>
                                <li><span class="must">品牌名</span><input class="logo_name" type="text"/><div class="clear"></div></li>
                                <li><span class="must">logo商标</span><input class="logosb" type="file"/><span class="logosbs"> 未上传</span><div class="clear"></div></li>
                                <li><p class="tipics">上传注意：图片尺寸128*68（jpg、png、gif、1M以内）</p></li>
                                <li><span class="must">官方网站</span><input class="company_web" type="text"/><div class="clear"></div></li>
                                <li><span class="must ">商标注册证</span><input class="sbzcz" type="file"/><span class="sbzczs"> 未上传</span><div class="clear"></div></li>
                                <li><p class="tipics">上传注意：图片尺寸800*1000（jpg、png、gif、1M以内）</p></li>
                                <li><p>请确保证件的真实有效性。若认证不通过请登录官方网站或app客户端修改认证信息。</p></li>
                                <li><p class="tips">验证码不正确，请重新输入</p></li>
                                <li><input class="third_step_btn" type="submit" value="保证证件真实，确定上传信息"/><div class="clear"></div></li>
                                <div class="clear"></div>
                            </ul>
                        </div>
                    </form>
                </div>
                <div class="remark"><p>加载中，请稍后...</p></div>
            </div>
            <script type="text/javascript">
                //            底部按钮点击切换
                var phone = $(".register .first_step .phone");
                var yanzhengma = $(".register .first_step .yanzhengma");
                var mm = $(".register .first_step .mm");
                var re_mm = $(".register .first_step .re_mm");
                var company_name = $(".register .second_step .company_name");
                var logo_name = $(".register .third_step .logo_name");
                var company_web = $(".register .third_step .company_web");
                var first_tips = $(".register .first_step .tips");
                var second_tips = $(".register .second_step .tips");
                var third_tips = $(".register .third_step .tips");
                $(".register .first_step .xiayibu").click(function () {
                    if (phone.val() === "") {
                        first_tips.show();
                        first_tips.text("请输入手机号");
                    } else if (!phone.val().match(/^1[3|4|5|7|8]\d{9}$/)) {
                        first_tips.show();
                        first_tips.text("请输入正确的手机号");
                    } else if (yanzhengma.val() === "") {
                        first_tips.show();
                        first_tips.text("请输入验证码");
                    } else if (yanzhengma.val().length < 4) {
                        first_tips.show();
                        first_tips.text("验证码至少四位");
                    } else if (mm.val() === "") {
                        first_tips.show();
                        first_tips.text("请输入密码");
                    } else if (mm.val().length < 6) {
                        first_tips.show();
                        first_tips.text("密码至少六位");
                    } else if (!mm.val().match(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/)) {
                        first_tips.show();
                        first_tips.text("密码必须有且只有数字和字母");
                    } else if (re_mm.val() === "") {
                        first_tips.show();
                        first_tips.text("请再次输入密码");
                    } else if (mm.val() !== re_mm.val()) {
                        first_tips.show();
                        first_tips.text("两次输入的密码不一致");
                    } else {
                        first_tips.hide();
                        $(this).val("loading...");
                        $(".step .step_one").removeClass("select");
                        $(".step .step_one").find("span").removeClass("active");
                        $(".step .step_two").addClass("select");
                        $(".step .step_two").find("span").addClass("active");
                        $(".register .first_step").hide();
                        $(".register .second_step").show();
                        $(".banner1 .img1").hide();
                        $(".banner1 .img2").show();
                        $(".step").css("margin-top", "-0.75rem");
                        $(".register form").css("margin-top", "0.84rem");
                    }
                });
                $(".register .second_step .step_sec_btn ").click(function () {

                    if (company_name.val() === "") {
                        second_tips.show();
                        second_tips.text("请输入公司名称");
                    } else {
                        second_tips.hide();
                        $(this).val("loading...");
                        $(".step .step_two").removeClass("select");
                        $(".step .step_two").find("span").removeClass("active");
                        $(".step .step_three").addClass("select");
                        $(".step .step_three").find("span").addClass("active");
                        $(".register .second_step").hide();
                        $(".register .third_step").show();
                        $(".banner1 .img1").hide();
                        $(".banner1 .img2").show();
                        $(".step").css("margin-top", "-0.75rem");
                        $(".register form").css("margin-top", "0.84rem");
                    }
                });
                $(".register .third_step .third_step_btn").click(function () {
                    if (logo_name.val() === "") {
                        third_tips.show();
                        third_tips.text("请输入品牌名称");
                        return false;
                    } else if (company_web.val() === "") {
                        third_tips.show();
                        third_tips.text("请输入公司网址");
                        return false;
                    } else if (!company_web.val().match(/^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/)) {
                        third_tips.show();
                        third_tips.text("请输入正确网址");
                        return false;
                    } else {
                        third_tips.hide();
                        $(this).val("loading...");
                        $(".remark").show();
                        $(".banner1 .img1").hide();
                        $(".banner1 .img2").show();
                        $(".step").css("margin-top", "-0.75rem");
                        $(".register form").css("margin-top", "0.84rem");
                    }
                });
                //文件上传部分
                //营业执照
                $(".register .second_step .yyzzs").click(function () {
                    $(".register .second_step .yyzz").click();
                    $(".register .second_step .yyzz").change(function () {
                        $(".register .second_step .yyzzs").addClass("actives");
                        $(".register .second_step .yyzzs").text("已上传");
                    });
                });
                //组织机构代码证
                $(".register .second_step .zzjgs").click(function () {
                    $(".register .second_step .zzjg").click();
                    $(".register .second_step .zzjg").change(function () {
                        $(".register .second_step .zzjgs").addClass("actives");
                        $(".register .second_step .zzjgs").text("已上传");
                    });
                });
                //税务登记证
                $(".register .second_step .swdjs").click(function () {
                    $(".register .second_step .swdj").click();
                    $(".register .second_step .swdj").change(function () {
                        $(".register .second_step .swdjs").addClass("actives");
                        $(".register .second_step .swdjs").text("已上传");
                    });
                });
                //logo商标
                $(".register .third_step .logosbs").click(function () {
                    $(".register .third_step .logosb").click();
                    $(".register .third_step .logosb").change(function () {
                        $(".register .third_step .logosbs").addClass("actives");
                        $(".register .third_step .logosbs").text("已上传");
                    });
                });
                //商标注册证
                $(".register .third_step .sbzczs").click(function () {
                    $(".register .third_step .sbzcz").click();
                    $(".register .third_step .sbzcz").change(function () {
                        $(".register .third_step .sbzczs").addClass("actives");
                        $(".register .third_step .sbzczs").text("已上传");
                    });
                });
            </script>


    </body>
</html>

